<template>
    <div>
      <slot v-if="!showSort"></slot>
      <div class="spacebetween" v-if="showSort">
        <div class="tag" @click="tagactive=0;Sort('1')" :class="{tag:true,tag_active:tagactive==0}">默认</div>
        <div class="tag" @click="tagactive=1;Sort('sc')" :class="{tag:true,tag_active:tagactive==1}"><span>评分</span>
          <span :class="{sort_up:true,sort_up_active:isSort==1}"></span>
          <span :class="{sort_down:true,sort_down_active:isSort==2}"></span>
        </div>
        <div class="tag" @click="tagactive=2;Sort('wish')" :class="{tag:true,tag_active:tagactive==2}"><span>想看人数</span>
          <span :class="{sort_up:true,sort_up_active:isSort==1}"></span>
          <span :class="{sort_down:true,sort_down_active:isSort==2}"></span>
        </div>
      </div>
          <el-card :body-style="{padding:'0'}" v-for="(item, id) in List" :key="id">
            <img :src="item.img|setWH('128.180')" class="image">
            <div class="contain" @click="isLogin?$global.goPage('/detail/'+item.id):$global.goPage('/login')">
              <h1>{{item.nm}}</h1>
              <h2 v-if="item.globalReleased&&item.sc!=0">观众评<span class="yspan">{{item.sc}}</span></h2>
              <h2><span class="yspan">{{item.wish}}</span>人想看</h2>
              <h3>主演：{{item.star}}</h3>
              <h4 v-if="item.comingTitle">上映日期：<span class="rspan">{{item.comingTitle}}</span> </h4>
              <h4 v-else>上映日期：{{item.rt}}</h4>
<!--              <h4>{{item.showInfo}}</h4>-->
            </div>
          </el-card>
    </div>
</template>

<script>
    export default {
        name: "movieList",
      props:{
          showSort: {type:Boolean,default:true},
          isLogin:{type:Boolean,required: true},
          MovieList:{required:true}
      },
      data(){
          return{
            List:this.MovieList,
            tagactive:0,
            isSort:0//排序

          }
      },
      watch: {
        MovieList(val){
          this.List = val;
        }
      },
      methods:{
        Sort(type){
          if(type=='1'){
            this.isSort=0
            this.List=this.MovieList
          }
          if(this.isSort==1){
            this.isSort=2
            let InfoDesc=this.List
            for(var i=1;i<InfoDesc.length;i++){
              for(var j=0;j<InfoDesc.length-i;j++){
                var temp=0;
                if(InfoDesc[j][type]<InfoDesc[j+1][type]){
                  temp=InfoDesc[j];
                  InfoDesc[j]=InfoDesc[j+1];
                  InfoDesc[j+1]=temp;
                }
              }
            }
            this.List=InfoDesc
          }else {
            this.isSort=1
            let Infoasc=this.List
            for(var i=1;i<Infoasc.length;i++){
              for(var j=0;j<Infoasc.length-i;j++){
                var temp=0;
                if(Infoasc[j][type]>Infoasc[j+1][type]){
                  temp=Infoasc[j];
                  Infoasc[j]=Infoasc[j+1];
                  Infoasc[j+1]=temp;
                }
              }
            }
            this.List=Infoasc
          }

        }
      }
    }
</script>

<style scoped lang="less">
.tag{
  width: 30%;
  height: 45px;
  line-height: 45px;
  background: #F7F7F7;
  border-radius: 32px;
  color: #666666;
  text-align: center;
  margin-bottom: 10px;
  margin-right: 8px;
  position: relative;
}
.tag_active {
  color: #5eabc7;
  background: #FFFFFF;
  border: 1px solid #5eabc7;
  border-radius: 28px;

.sort_up_active {
  border-bottom-color: #5eabc7;
}

.sort_down_active {
  border-top-color: #5eabc7;
}
}
.sort_up{
  display: inline-block;
  margin-bottom: 8px;
  border: 7px solid transparent;
  border-bottom-color: #c0c4cc;

}
.sort_down{
  border: 7px solid transparent;
  border-top-color: #c0c4cc;
  display: inline-block;
  margin-bottom: -10px;
  margin-left: -19px;
}


  .el-card{
  height:100%;
    padding: 10px 0;
    box-sizing: border-box;
    margin: 2px auto;
  }
  .contain{
    text-align: start;
    margin: 0 110px;
    vertical-align:baseline;
  }
.image{
  width: 80px;
  height: 110px;
  float: left;
  margin-left: 10px;
  margin-right: 12px;
}
</style>
